<script lang="ts" setup>
import type { Teacher01ComponentMeta } from '@/definitions/type'
import { useCompStyleRender } from '@/hooks/useCompStyleRender'
import { usePrefix } from '@/hooks/usePrefix'
import { useSwiper } from '@/hooks/useSwiper'
import { useDesignStore } from '@/stores'
import { computed } from 'vue'
import './RenderTeacher01.less'

defineOptions({
  name: 'RenderTeacher01',
})
const props = defineProps<{
  render: Teacher01ComponentMeta
}>()
const designStore = useDesignStore()
const platform = computed(() => designStore.config.platform)
const { prefix } = usePrefix()
const { style, wraperCls } = useCompStyleRender(props)
/** 此模板显示上限4个 */
const renderedItems = computed(() => props.render.config.teachers!.slice(0, 4))
const { swiperCls, swiperId } = useSwiper({
  prefix,
  props,
  watchSourceForUpdate: () => props.render.config.teachers,
  swiperOpts: {
    autoplay: true,
    pagination: false,
    slidesPerView: 'auto',
    spaceBetween: 10,
    centeredSlides: true,
    slideActiveClass: prefix('swiper-slide-active'),
  },
})
</script>

<template>
  <div :style="style" :class="[prefix('wraper'), prefix(wraperCls), prefix(platform)]">
    <div v-if="platform === 'mobile'" :class="prefix('main')">
      <div :id="swiperId" class="swiper" :class="[swiperCls]">
        <div class="swiper-wrapper">
          <!-- item for loop -->
          <div v-for="item in renderedItems" :key="item.id" class="swiper-slide" :class="[prefix('swiper-slide')]">
            <a :href="item.url" target="_blank" :class="prefix('teacher')">
              <img :src="item.pic" :class="prefix('picture')">
              <div :class="prefix('info')">
                <div :class="prefix('name')">
                  {{ item.title }}
                </div>
                <div :class="prefix('desc')">
                  {{ item.desc }}
                </div>
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>
    <div v-else-if="platform === 'pc'" :class="prefix('main')">
      <!-- 列表 -->
      <div :class="prefix('cards')">
        <!-- item for loop -->
        <div v-for="item in renderedItems" :key="item.id" :class="prefix('card')">
          <img :src="item.pic" :class="prefix('picture')">
          <div :class="prefix('info')">
            <div :class="prefix('name')">
              {{ item.title }}
            </div>
            <div :class="prefix('desc')">
              {{ item.desc }}
            </div>
            <a :href="item.url" target="_blank" :class="prefix('target')">
              <span :class="prefix('target-text')">了解详情</span>
              <span :class="prefix('target-cursor')">
                <i class="iconfont icon-moban1_jiantou_xiangyou" :class="[prefix('target-icon')]" />
              </span>
            </a>
          </div>
        </div>
      </div>
      <!-- 按钮 -->
      <a v-if="render.config.buttonUrl" target="_blank" :href="render.config.buttonUrl" :class="prefix('btn')">{{ render.config.buttonText }}</a>
    </div>
  </div>
</template>
